<template>
  <div>
    <ae-base-dialog :title="$t('s.title')" v-model="showModel">
      <ae-form
        v-if="loadFlag"
        ref="userSettingForm"
        v-model="userSetting"
        :formConfig="userSettingConfig"
        hasBorder
      />
      <div slot="footer">
        <ae-button-list
          :buttonList="[$t('c.cancel'), $t('c.save')]"
          :clickAction="[cancelSave, saveSetting]"
        ></ae-button-list>
      </div>
    </ae-base-dialog>
  </div>
</template>

<script>
import { GetUserSetting, ChangeUserSetting } from "@/api";
import dialogShow from "@/mixins/frame/dialogShow.js";
import {updateUserSetting} from "../../utils/authUtil";

export default {
  mixins: [dialogShow],
  data() {
    return {
      loadFlag: false,
      userSetting: {},
      userSettingConfig: [
        {
          type: "switchSelect",
          key: "language",
          des: this.$t("s.language"),
          items: [
            {
              key: "zh",
              value: this.$t("s.chinese"),
            },
            {
              key: "en",
              value: this.$t("s.english"),
            },
          ],
        },
        {
          type: "switchSelect",
          key: "img_size",
          des: this.$t("s.imgSize"),
          items: [
            {
              key: "small",
              value: this.$t("s.small"),
            },
            {
              key: "stand",
              value: this.$t("s.stand"),
            },
            {
              key: "big",
              value: this.$t("s.big"),
            },
          ],
        },
        {
          type: "switchSelect",
          key: "pc_style",
          des: this.$t("s.pcStyle"),
          items: [
            {
              key: "pc",
              value: this.$t("s.pc"),
            },
            {
              key: "mp",
              value: this.$t("s.mp"),
            },
          ],
        },
      ],
    };
  },
  methods: {
    cancelSave() {
      this.$emit("close");
    },
    saveSetting() {
      this.userSetting = this.$refs.userSettingForm.getFormData();
      ChangeUserSetting(this.userSetting).then(() => {
        this.$appHelper.successMsg(this.$t("c.changeSuccess"));
        updateUserSetting(this.userSetting);
        this.$emit("close");
      });
    },
    onDialogCreate() {
      this.userSetting = {};
      GetUserSetting().then(({ res_val }) => {
        this.userSetting = res_val;
        this.loadFlag = true;
      });
    },
  },
  created() {
  },
};
</script>

<style>
</style>